<template>
  <view>
    <Lampgoods>
      <view>

        <view class="miaosha">

          <view class="left">
            <view class="letop">
              <view class="jianq">
                最低价
              </view>
              <view class="shengyu">
                已售{{goods_Detail.goods_Detailst.sold_count}}件剩余{{goods_Detail.goods_Detailst.all_count-goods_Detail.goods_Detailst.sold_count}}件
              </view>
            </view>
            <view class="prites">
              <view class="price">
                ￥{{goods_Detail.goods_Detailst.unit_price}}
              </view>
              <view class="delt_price">
                原价 ￥{{goods_Detail.goods_Detailst.discount_price}}
              </view>
            </view>
          </view>

          <view class="right" v-if="kanjiaxinxi.kanjiaxg.is_Kanjia">
            <view class="rigtop">
              距离砍价结束仅剩
            </view>
            <view class="rigbut">
              <u-count-down :timestamp="kanjiaxinxi.timestamp" @change="onChange">
                <view class="time">
                  <view class="time">
                    <view class="time__custom">
                      <text class="time__custom__item">{{ timeData.days>=10?timeData.days:'0'+timeData.days}}</text>
                    </view>
                    <text class="time__doc" style="margin-top: 8rpx;">天</text>
                    <view class="time__custom">
                      <text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
                    </view>
                    <text class="time__doc">:</text>
                    <view class="time__custom">
                      <text
                        class="time__custom__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes}}</text>
                    </view>
                    <text class="time__doc">:</text>
                    <view class="time__custom">
                      <text
                        class="time__custom__item">{{timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds}}</text>
                    </view>
                  </view>
                </view>
              </u-count-down>
            </view>
          </view>
          <view class="right" v-else>
            <view class="rigtopp">
              <p>开始砍价后</p>
              <P> 有三天时间进行砍价</P>
            </view>
          </view>
        </view>
        <view class="schedule" v-if="kanjiaxinxi.kanjiaxg.is_Kanjia">
          <view class="allpric">
            ￥{{kanjiaxinxi.kanjiaxg.price}}
          </view>
          <view class="jidut">
            <u-line-progress height="20" :percent="kanjiaxinxi.kanjiaxg.percent" activeColor="#57bead"
              :striped-active="true"></u-line-progress>
            <view class="price">
              <view class="">
                ￥{{goods_Detail.goods_Detailst.discount_price}}
              </view>
              <view class="">
                ￥{{goods_Detail.goods_Detailst.unit_price}}
              </view>
            </view>

          </view>
        </view>
      </view>
      <u-popup :closeable="true" v-model="show" mode="center" width="600rpx" height="700rpx" border-radius="20">
        <view class="kanj">
          <view class="kanjcg">
           <view>
             恭喜你! 一出手就帮自己
           </view>
           <view>
             砍掉了￥{{kanjiaxinxi.num}}
           </view>
          </view>
          <view class="imge">
            <u-image width="80%" height="300rpx" src="https://gitee.com/yeyushegnfan/gitee-drawing-bed/raw/master/img/202304140002206.png"></u-image>
          </view>
          <view class="but">
            <u-button shape="circle"  size="medium" type="warning" @click="yaoqing">邀请好友进行砍价</u-button>
          </view>
        </view>
      </u-popup>
      	<u-toast ref="uToast" />
      <view slot="goumaibut" class="rightt" v-if="kanjiaxinxi.kanjiaxg.is_Kanjia && !kanjiaxinxi.kanjiaxg.is_Wancheng">
        <view class="cart btn u-line-1" @click="yaoqing">邀请好友(增加一刀)</view>
        <view class="buy btn u-line-1" @click="kanjia">砍一刀(还剩{{kanjiaxinxi.kanjiaxg.kanj_count}}次)</view>
      </view>
      <view slot="goumaibut" class="rightt" v-if="!kanjiaxinxi.kanjiaxg.is_Kanjia && !kanjiaxinxi.kanjiaxg.is_Wancheng">
        <view class="cart btn u-line-1">立即购买</view>
        <view class="buy btn u-line-1" @click="Faqikanjia">发起砍价</view>
      </view>
      <view slot="goumaibut" class="rightt" v-if="kanjiaxinxi.kanjiaxg.is_Wancheng">
        <view class="kanwan btn u-line-1" @click="kanjiawanc(goods_Detail.goods_Detailst.product_id)">砍价完成立即购买</view>
      </view>
    </Lampgoods>
  </view>

</template>

<script setup>
  import Lampgoods from "/src/components/Lampgoods/Lampgoods.vue"
  import {
    addressUserStore
  } from "../../store/address.js"
  const  addressStore= addressUserStore()
  import {
    ref,
    getCurrentInstance
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app';
  const {
    proxy
  } = getCurrentInstance()
  import {
    goodsStore
  } from "../../store/goods.js"
  const goodStore = goodsStore()
  //定义商品id
  const goods_id = ref("")
  onLoad((options) => {
    goods_id.value = options.goods_id
    goodStore.is_Kanjia(options.goods_id)
  });
  const {
    goods_Detail,
    kanjiaxinxi
  } = goodStore

  //发起砍价
  function Faqikanjia() {
    goodStore.Faqikanjia(goods_id.value)
  }
  const timeData = ref({})
  //是否显示砍价
  const show = ref(false)
//砍价
  function kanjia() {
      
    if(kanjiaxinxi.kanjiaxg.kanj_count===0){
    	proxy.$refs.uToast.show({
    					title: '没有次数啦。邀请好友增加次数',
    					type: 'error',
    			
    				})
    }else{
      //发送砍价请求
      goodStore.kanyidao(goods_id.value)
      show.value = true
    }

  }
//邀请好友
function yaoqing(){
  proxy.$refs.uToast.show({
  				title: '暂未开放,尽请期待',
  				type: 'error',
  		
  			})
}
  function onChange(e) {
    if (e.days === 0 & e.hours === 0 & e.minutes === 0 & e.seconds === 0) {
      if (kanjiaxinxi.status !== 'padding')
        goodStore.is_Kanjia(goods_id.value)
    }
    timeData.value = e
  }
  //购买
  function kanjiawanc(id){
    addressStore.getdeladdre()
    uni.navigateTo({
      url:`/subPack/submitorder/submitorder?goods_id=${id}&goodcount=${1}`
    })
  }
</script>

<style scoped lang="scss">
  .miaosha {
    margin: 40rpx 0;
    background-color: #57bead;
    height: 140rpx;
    display: flex;
    justify-content: space-between;

    .left {
      margin-top: 20rpx;
      margin-left: 20rpx;
      height: 40rpx;
      line-height: 40rpx;

      .letop {
        display: flex;

        // justify-content: space-between;
        .jianq {
          color: #fff;
          font-size: 30rpx;
        }

        .shengyu {
          margin-left: 20rpx;
          color: #fff;
          font-size: 20rpx;
          background-color: #a8a8a8;
          padding: 0 15rpx;
          border-radius: 10rpx;
        }
      }

      .prites {
        display: flex;
        justify-content: space-between;

        .price {
          margin-top: 20rpx;
          padding-left: 30rpx;
          color: #fff;
          font-size: 35rpx;
        }

        .delt_price {
          text-decoration: line-through;
          margin-top: 20rpx;
          font-size: 20rpx;
          color: #fff;

        }
      }
    }

    .right {
      margin-right: 10rpx;

      .rigtop {
        margin-top: 40rpx;
        font-size: 25rpx;
        color: #fff;
      }

      .rigtopp {
        margin-top: 50rpx;
        font-size: 25rpx;
        text-align: center;
        color: #fff;
      }

      .rigbut {
        .time {
          display: flex;
          align-items: center;

          &__custom {
            margin-top: 4px;
            width: 20px;
            height: 20px;
            background-color: #489e90;
            border-radius: 4px;
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            justify-content: center;
            align-items: center;

            &__item {
              color: #fff;
              font-size: 12px;
              text-align: center;
            }
          }

          &__doc {
            color: #fff;
            padding: 2rpx 8rpx;
            font-size: 25rpx
          }


        }

      }
    }
  }

  .schedule {
    padding: 20rpx 40rpx;

    .allpric {
      font-weight: 600;

    }

    .jidut {
      padding: 0 25rpx;

      .price {
        padding: 10rpx 0;
        display: flex;
        justify-content: space-between;
        color: #878787;
      }
    }
  }
   
   .kanj{
      text-align: center;
      
     .kanjcg{    
       padding-top: 100rpx;
       // margin-top: 100rpx;
       border-radius: 40rpx;
       text-align: center;
       font-size: 40rpx;
       
       
     }
     .imge{
       margin-left: 70rpx;
       margin-top: 20rpx;
     }
     .but{

     }
   }
  .rightt {

    // border: 1px solid red;
    display: flex;
    margin-left: 20rpx;
    font-size: 28rpx;
    align-items: center;


    .btn {
      text-align: center;
      line-height: 80rpx;
      width: 250rpx;

      color: #ffffff;
    }

    .cart {
      background-color: #ff7900;
      border-radius: 40rpx 0 0 40rpx;
    }

    .buy {
      background-color: #489e90;
      border-radius: 0 40rpx 40rpx 0;
    }
    .kanwan{
      width: 400rpx;
      margin-left: 40rpx;
      background-color: #489e90;
      border-radius: 40rpx ;
    }
  }
</style>